<!doctype html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>文字回复</title>
    <meta name="description" content="文字回复">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="__PUBLIC__/assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="__PUBLIC__/assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="__PUBLIC__/assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="__PUBLIC__/assets/css/admin.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/app.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/common.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/uploadify/uploadify.css" />  
</head>

<body data-type="generalComponents">

    <include file = "./Application/Admin/View/header.html"/>

<div class="tpl-page-container tpl-page-header-fixed" id="basic_info">

    <include file = "./Application/Admin/View/menu.html"/>
    <include file = "./Public/common/htm/loading.html"/>
    <include file = "./Public/common/htm/pop_win.html"/>

    <div class="tpl-content-wrapper">
        <div class="tpl-content-page-title">
            文字回复列表
        </div>
        <ol class="am-breadcrumb">
            <li><a href="#" class="am-icon-home">首页</a></li>
            <li><a href="#">微信</a></li>
            <li class="am-active">文字回复设置</li>
        </ol>
        <div class="tpl-portlet-components">
            <div class="portlet-title">
                <div class="caption font-green bold">
                    <span class="am-icon-code"></span> 明细
                    <!--<input id="upload_button" type="file" multiple="true" value="" />  -->

                </div>
                <!--<div class="tpl-portlet-input tpl-fz-ml">-->
                <!--<div class="portlet-input input-small input-inline">-->
                <!--<div class="input-icon right">-->
                <!--<i class="am-icon-search"></i>-->
                <!--<input type="text" class="form-control form-control-solid" placeholder="搜索..."></div>-->
                <!--</div>-->
                <!--</div>-->


            </div>
            <div class="tpl-block">

                <div class="am-g">
                        <div class="tpl-form-body tpl-form-line">
                            <form class="am-form tpl-form-line-form" data-am-validator id="basic_info_form">
                                <div class="am-form-group">
                                    <label for="rule_name" class="am-u-sm-2 am-form-label">规则名称<span class="tpl-form-line-small-title" style="color:red">必填</span></label>
                                    <div class="am-u-sm-10 content-group">
                                        <input type="text" class="tpl-form-input" id="rule_name" name="rule_name" :value="basic_info.rule_name" placeholder="请输入规则名称" required>
                                        <div class="am-alert am-alert-danger" hidden></div>
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="rule_keywords" class="am-u-sm-2 am-form-label">关键字<span class="tpl-form-line-small-title" style="color:red">必填</span></label>
                                    <div class="am-u-sm-10 content-group">
                                        <input type="text" class="tpl-form-input" id="rule_keywords" name="rule_keywords" :value="basic_info.rule_keywords" placeholder="请输入关键字,多个关键字使用','隔开" required>
                                        <div class="am-alert am-alert-danger" hidden></div>
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label for="content" class="am-u-sm-2 am-form-label">回复内容</label>
                                    <div class="am-u-sm-10 content-group">
                                        <textarea class="tpl-form-input" rows="10" id="content" name="content" placeholder="请输入回复内容" required :value="basic_info.content"></textarea>
                                        <div class="am-alert am-alert-danger" hidden></div>
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <div class="am-u-sm-10 am-u-sm-push-3">
                                        <button type="button" @click="basic_submit" class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交</button>
                                    </div>
                                </div>
                                <input type="hidden" id="rule_id" name="rule_id" :value="basic_info.rule_id"/>
                            </form>

                        </div>
                    </div>

                
            </div>
            
        </div>
        <div class="tpl-alert"></div>
    </div>
</div>
</body>


<script src="__PUBLIC__/assets/js/jquery.min.js"></script>
<script src="__PUBLIC__/assets/js/amazeui.min.js"></script>
<script src="__PUBLIC__/assets/js/app.js"></script>
<script src="__PUBLIC__/vue.js"></script>
<script src="__PUBLIC__/uploadify/jquery.uploadify.min.js"></script>  
<script>
    var vm = new Vue({
        el: '#basic_info',
        data: {
            users: [],
            groups: [],
            basic_info:{    
                             rule_id : '{$basic_info.rule_id}'
                            ,rule_name : '{$basic_info.rule.rule_name}'
                            ,rule_keywords : '{$basic_info.rule.rule_keywords}'
                            ,content : '{$basic_info.content}'
                       },
            max_page: 0,
            current_page: 1
        },
        methods: {
            basic_submit : function() {
                $ruleId = $("#rule_id").val();
                if ($ruleId!='') {
                    this.basic_edit();
                } else {
                    this.basic_add();
                }
            },
            basic_add : function () {
                if ($("#rule_name").val() == '') {
                    $("#rule_name").parent().find('.am-alert').html("请填写规则名称!").show();
                    return;
                } else {
                    $("#rule_name").parent().find('.am-alert').hide();
                }

                if ($("#rule_keywords").val() == '') {
                    $("#rule_keywords").parent().find('.am-alert').html("请填写回复关键字!").show();
                    return;
                } else {
                    $("#rule_keywords").parent().find('.am-alert').hide();
                }

                if ($("#content").val() == '') {
                    $("#content").parent().find('.am-alert').html("请填写规则名称!").show();
                    return;
                } else {
                    $("#content").parent().find('.am-alert').hide();
                }
                var result = this.keywordsValidate($("#rule_keywords").val());
                if (result) {
                    $("#rule_keywords").parent().find('.am-alert').html(result).show();
                    return;
                } else {
                    $("#rule_keywords").parent().find('.am-alert').hide();
                }
                $("#loading_modal").modal({closeViaDimmer:0});
                $.ajax({
                    type: 'post',
                    url: '../MessageReplyApi/basic_add',
                    dataType: 'json',
                    data: $('#basic_info_form').serialize(),
                    success: function (data) {
                        $("#loading_modal").modal("close");
                        
                        if (data.stateCode == 200) {
                            $("#pop_win").find("#tip_index").html('操作提示');
                            $("#pop_win").find("#tip_content").html('添加成功!');
                            $("#pop_win").modal();
                        }
                    },
                    error: function (data) {
                        console.log('error');
                    }
                })
            },
            basic_edit : function () {
                if ($("#rule_name").val() == '') {
                    $("#rule_name").parent().find('.am-alert').html("请填写规则名称!").show();
                    return;
                } else {
                    $("#rule_name").parent().find('.am-alert').hide();
                }

                if ($("#rule_keywords").val() == '') {
                    $("#rule_keywords").parent().find('.am-alert').html("请填写回复关键字!").show();
                    return;
                } else {
                    $("#rule_keywords").parent().find('.am-alert').hide();
                }

                if ($("#content").val() == '') {
                    $("#content").parent().find('.am-alert').html("请填写规则名称!").show();
                    return;
                } else {
                    $("#content").parent().find('.am-alert').hide();
                }
                var result = this.keywordsValidate($("#rule_keywords").val());
                if (result) {
                    $("#rule_keywords").parent().find('.am-alert').html(result).show();
                    return;
                } else {
                    $("#rule_keywords").parent().find('.am-alert').hide();
                }

                $("#loading_modal").modal({closeViaDimmer:0});
                $.ajax({
                    type: 'post',
                    url: '../MessageReplyApi/basic_edit',
                    dataType: 'json',
                    data: $('#basic_info_form').serialize(),
                    success: function (data) {
                        $("#loading_modal").modal("close");
                        
                        if (data.stateCode == 200) {
                            $("#pop_win").find("#tip_index").html('操作提示');
                            $("#pop_win").find("#tip_content").html('添加成功!');
                            $("#pop_win").modal();
                        }
                    },
                    error: function (data) {
                        console.log('error');
                    }
                })
            },
            keywordsValidate : function (keywords){
                var result = '';
                $.ajax({
                    type: 'post',
                    url: '../../Validation/Validation/replyKeyWords',
                    dataType: 'json',
                    async : false,
                    data: {'rule_keywords':keywords},
                    success: function (data) {
                       if (data.stateCode==200){
                           result = data.message;
                       } else {
                           result = data.message;
                       }
                    },
                    error: function (data) {
                        console.log('error');
                    }
                })
                return result;
            }
            
        },
    })

    $(document).ready(function () {
    
        $('#upload_button').uploadify({  
            'swf'      : '__PUBLIC__/uploadify/uploadify.swf',  
            'uploader' : '{:U("Upload/Upload/uploadMultiFile")}',//这个就是处理上传文件的地址  
            'buttonText' : '上传照片',  
            'multi'    : true,//多张图片上传flag  true 为允许，false为禁止
            'onUploadSuccess' : function(file, data, response) {  
                console.log(data);
                debugger;
                data.trim();//这个是文件在服务器上的路径，如果是图片，可以使用src 
            }  
        });  
    })

</script>


</html>